<template>
  <div class="=user-manage-container">
    <div class="el-card is-always-shadow header">
      <div class="el-card__body">
        <button class="el-button el-button--primary" type="button">
          <span>excel导入</span>
        </button>
        <button class="el-button el-button--success" type="button">
          <span>excel导出</span>
        </button>
      </div>
    </div>
    <div class="list">
      <el-table :data="staffList" border style="width: 100%">
        <el-table-column type="index" label="#" width="180"> </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="联系方式" width="180">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="180" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatar" class="img"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="role[0].title" label="角色" width="180">
        </el-table-column>
        <el-table-column
          prop="openTime"
          label="开通时间"
          width="180"
          :formatter="forDate"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="userinfowell(scope.row.id)"
              >查看</el-button
            >
            <el-button type="info" size="mini" 
              >角色</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="fy"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      page: 1,
      size: 2,
      total: 0,
      staffList: [],
    };
  },
  created() {
    this.getStaffList();
  },
  methods: {
    async getStaffList() {
      console.log("123");
      let res = await this.userApi.getStaffList(this.page,this.size);
      console.log(res);
      this.staffList = res.list;
      this.total = res.total;
    },
    // 转化为时间戳
    forDate: function (row, column, cellValue, index) {
      cellValue = new Date().toLocaleString();
      return cellValue;
    },
    //条数变化
    handleSizeChange(val) {
      this.size = val;
      this.getStaffList();
    },
    //页码变化
    handleCurrentChange(val) {
      this.page = val;
      this.getStaffList();
    },
    //员工删除
    handleDelete(id) {
      this.$confirm("确认删除这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await userfApi.deleteStaff(id);
          if (res.data.flag) {
            this.$message({ type: "success", message: "删除成功!" });
            this.getStaffList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            message:"已取消删除",
            message:"已取消删除",
            message:"已取消删除"
          });
        });
    },
    userinfowell(id) {
      console.log(111);
      this.$router.push("/user/info/:id");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card__body {
  padding-left: 1370px;
}
.list {
  margin-top: 50px;
}
.img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}
.fy {
  margin-left: 300px;
  margin-top: 30px;
  font-size: 20px;
}
</style>
